@use "../abstracts/variables" as *;
.section-about {
    background-color: $color-grey-light-1;
    padding: 25rem 0;
    margin-top: -20vh;
}

.section-features {
    padding: 20rem 0;
    background-image:
        linear-gradient(to right bottom, rgba($color-primary-light, 0.8), rgba($color-primary-dark, 0.8)),
        url(../img/nat-4.jpg);
    background-size: cover;

    transform: skewY(-7deg);
    margin-top: -20vh;

    //整体倾斜后设置所有子元素再反向倾斜回去
    & > * {
        transform: skewY(7deg);
    }
}

.section-tours {
    background-color: $color-grey-light-1;
    padding: 25rem 0 15rem 0;
    margin-top: -11rem;
}

.section-stories {
    padding: 15rem 0;
    position: relative;
}

.section-book {
    padding: 15rem 0;
    background-image: linear-gradient(to right bottom,$color-primary-light,$color-primary-dark);
}

.book {
    background-image:linear-gradient(105deg,
                                    rgba($color-white,.9) 0% 50%,transparent 50%), //注意这里的参数，他指定从0到50为白色，50以后为透明
                                    url(../../img/nat-10.jpg); 
    background-size: 100%;
    border-radius: 3px;
    box-shadow: 0 1.5rem 4rem rgb($color-black,.15);
    height: 50rem;
    // position: absolute;
    // width: $grid-width;
}

.book-form {
    width: 50%;
    padding: 6rem;
}